import { connect } from 'dva';
import { Form, Input, Button, Checkbox } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';

import styles from './LoginPage.css';

const LoginPage = ({ dispatch }) => {

  const onFinish = ({ username, password }) => {
    dispatch({
      type: 'users/login',
      username,
      password
    });
  };

  return (
    <Form
      name="login"
      className={styles.login_form}
      initialValues={{
        remember: true,
      }}
      onFinish={onFinish}>

      <Form.Item>
        <h1>员工状态管理系统</h1>
        <div>中国石化工程建设公司设备室</div>
      </Form.Item>

      <Form.Item
        name="username"
        rules={[
          {
            required: true,
            message: '请输入用户名!',
          },
        ]}>
        <Input
          prefix={<UserOutlined className="site-form-item-icon" />}
          placeholder="用户名"
          style={{ width: '50%' }} />
      </Form.Item>

      <Form.Item
        name="password"
        rules={[
          {
            required: true,
            message: '请输入密码!',
          },
        ]}>
        <Input
          prefix={<LockOutlined className="site-form-item-icon" />}
          type="password"
          placeholder="密码"
          style={{ width: '50%' }} />
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit">
          登录
        </Button>
        &nbsp;或者&nbsp;
        <a href="/register">注册</a>
      </Form.Item>
    </Form>
  );
};

export default connect(({  }) => ({

}))(LoginPage);
